<template>
  <div id="app" >
     <baidu-map 
     class="bm-view" 
     :center="center"
      :scroll-wheel-zoom="true"
      @ready="handler">

      </baidu-map>
  </div>

  
</template>

<script >
export default {
    name: 'Map',
data () {
    return {
    point: "",
    center: {lng: 0, lat: 0},
      zoom: 12
    
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
       // 创建地图实例 
      this.point = new BMap.Point(108.281136, 22.867845);
       // 创建点坐标
      map.centerAndZoom(this.point, 12);
      // 创建标注
      var marker = new BMap.Marker(this.point) 
      // 将标注添加到地图中
      map.addOverlay(marker) 
    const geoc= new BMap.Geocoder();
    map.addEventListener('click', function (e) {
      //清除地图上所有的覆盖物
      map.clearOverlays();
      const point = new BMap.Point(e.point.lng, e.point.lat);
      const marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))
        // 生成覆盖物-marker点
        map.addOverlay(marker) 
        geoc.getLocation(point, (rs) => {
          var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        })
          
    })
        
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
.bm-view {
  width:100%;
  height: 800px;

}

</style>
